import React, {Component} from 'react'
import styles from './tabs.less'
import { Tabs } from 'antd'
import Tree from "@/components/Tree/Tree"

const { TabPane } = Tabs

class TabsControl extends Component {
  constructor(props) {
    super(props);
  }

  renderVideos(videos) {
    videos.forEach(item => {
      item.level = 'level1'
    })
    const node = {
      child: [
        ...videos
      ]
    }
    return <Tree treeList={node} detailTree={true}/>
  }

  render() {
    const {description = '', videos = []} = this.props
    return (
      <div className={styles.tabs}>
        <Tabs defaultActiveKey="1">
          <TabPane tab="课程介绍" key="1" style={{padding: '0 20px'}}>
            {description && <img src={description} className={styles.description}/>}
          </TabPane>
          <TabPane tab="目录" key="2" style={{padding: '0 20px'}}>
            {this.renderVideos(videos)}
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

export default TabsControl;